import React from 'react'
import { Keyboard, StyleSheet, View, Text, LayoutAnimation } from 'react-native'
import * as Animatable from 'react-native-animatable'
import CommonInputPage from 'src/pageP/common/common-input-page'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import { CommonToast, DismissLoading, ShowLoading } from 'src/utils/ToastUtil'
import { ONE_PIXEL, ScaleS, ScaleT, IS_IOS } from 'src/utils/ScreenUtil'
import { isArrayFn } from 'src/utils/JSTypeUtil'
import { updateSelfEvaluation, findIntroTemp } from 'src/utils/RequestAPI'
/* redux */
import { connect } from 'react-redux'
import { UPDATE_MAIN_PAGE_C_ACTION } from '@/pageC/mine/mine-page/store/action'

// 发送行为
const mapDispatchToProps = dispatch => ({
  updateMainPageC (payload) {
    dispatch(UPDATE_MAIN_PAGE_C_ACTION(payload))
  }
})

@connect(
  ({ userinfo, CMineCenterStore }) => ({
    userId: userinfo.C.userId,
    userArchiveModel: CMineCenterStore.userArchiveModel
  }),
  mapDispatchToProps
)
class UserSelfEvalution extends CommonInputPage {
  constructor (props) {
    super(props)
    let {
      navigation: {
        state: {
          params: { intro } = {}
        }
      }
    } = this.props
    if (!intro) {
      intro = this.props.userArchiveModel.intro || ''
    }
    this.state = {
      ...this.state,
      editValue: intro,
      count: intro.length,
      checked: intro.length,
      tipDataSource: null,
      tipShow: false,
      tipIndex: 0
    }
    findIntroTemp().then(res => {
      const tipDataSource = res.data
      if (isArrayFn(tipDataSource)) {
        this.setState({
          tipDataSource
        })
      }
    })
  }

  renderBottomView () {
    const { tipShow, tipIndex, tipDataSource } = this.state
    return (
      <View style={stylesE.tipCont}>
        <View style={stylesE.btns}>
          <CustomButton style={stylesE.tipBtn} onPress={this.toggleShowBtnClick}>
            <CustomImage source={require('@/imgC/userinfo/yellow_eye.png')}/>
            <Text style={stylesE.tipBtnText}></Text>
            <Text style={stylesE.tipBtnText}>看看别人怎么写</Text>
          </CustomButton>
          {tipShow && tipDataSource && <CustomButton style={stylesE.tipBtn} onPress={this.refreshBtnClick}>
            <Animatable.Image
              style={stylesE.tipImg}
              source={require('@/imgC/userinfo/yellow_refresh.png')}
              useNativeDriver={IS_IOS}
              ref={this.handleRefreshImgRef}/>
            <Animatable.Text style={stylesE.tipBtnText}
              ref={this.handleRefreshTextRef}>换一个</Animatable.Text>
          </CustomButton>}
        </View>
        { tipShow && tipDataSource &&
          <Animatable.View style={stylesE.tipTxtWrap}
            animation={'pulse'}
            useNativeDriver={IS_IOS}>
            <View style={stylesE.borderUp}/>
            <View style={stylesE.borderUpEmpty}/>
            <Text style={stylesE.tipTxt}>{tipDataSource[tipIndex]}</Text>
          </Animatable.View>
        }
      </View>
    )
  }

  componentDidMount () {
    this.keyboardShowListener = Keyboard.addListener(
      IS_IOS ? 'keyboardWillShow' : 'keyboardDidShow',
      this._keyboardShow
    )
    this.keyboardHideListener = Keyboard.addListener(
      IS_IOS ? 'keyboardWillHide' : 'keyboardDidHide',
      this._keyboardHide
    )
  }

  componentWillUnmount () {
    super.componentWillUnmount()
    this.keyboardShowListener.remove()
    this.keyboardHideListener.remove()
  }

  _keyboardShow = () => {
    LayoutAnimation.easeInEaseOut()
    this.scrollViewContainer.setNativeProps({
      style: { marginTop: ScaleS(-100) }
    })
  }

  _keyboardHide = () => {
    LayoutAnimation.easeInEaseOut()
    this.scrollViewContainer.setNativeProps({
      style: { marginTop: 0 }
    })
  }

  handleRefreshImgRef= ref => this.refreshImg = ref

  handleRefreshTextRef= ref => this.refreshTxt = ref

  handletipImgRef =ref => this.tipImg = ref

  handletipTextRef =ref => this.tipTxt = ref

  scrollViewRef = ref => {
    this.scrollViewContainer = ref
  }

  toggleShowBtnClick = () => {
    this.setState({
      tipShow: !this.state.tipShow
    })
  }

  refreshBtnClick = () => {
    const { tipIndex, tipDataSource } = this.state
    LayoutAnimation.easeInEaseOut()
    this.setState({
      tipIndex: tipDataSource && tipIndex + 1 < tipDataSource.length ? tipIndex + 1 : 0
    })
    this.refreshImg.transition({ rotate: '00deg' }, { rotate: '360deg' }, 800)
    this.refreshTxt.pulse(800)
  }

  onSave = () => {
    Keyboard.dismiss()
    const { editValue: intro, pinyin, checked } = this.state
    if (pinyin) {
      return
    }
    if (!checked) {
      CommonToast(`请输入有效的自我评价`)
      return
    }
    const {
      navigation: {
        state: {
          params: { saveCallback }
        }
      }
    } = this.props
    if (saveCallback) {
      // 在上一页请求修改自我评价
      saveCallback(intro)
      this.props.navigation.goBack()
      return
    }
    const { userId, userArchiveModel } = this.props
    const { id: archiveId } = userArchiveModel

    const params = { userId, archiveId, intro }
    ShowLoading()
    updateSelfEvaluation({ params }).then(() => {
      this.props.updateMainPageC({
        userArchiveModel: {
          ...userArchiveModel,
          intro
        }
      })
      this.props.navigation.goBack()
    }).finally(() => {
      DismissLoading()
    })
  }
}
export default UserSelfEvalution

const stylesE = StyleSheet.create({
  container: {
    flex: 1
  },
  tipCont: {
    alignSelf: 'center',
    width: ScaleS(335),
    paddingTop: ScaleS(14),
    borderColor: '#EFEFEF',
    borderTopWidth: ONE_PIXEL
  },
  btns: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  tipBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    height: ScaleS(34)
  },
  tipImg: {
    transform: [{ rotate: '0deg' }]
  },
  tipBtnText: {
    marginLeft: ScaleS(7),
    fontSize: ScaleT(14),
    fontWeight: '400',
    color: '#666666'
  },
  tipTxtWrap: {
    position: 'relative',
    marginTop: ScaleS(10),
    width: ScaleS(335),
    paddingHorizontal: ScaleS(16),
    paddingVertical: ScaleS(18),
    borderColor: '#979797',
    borderWidth: ONE_PIXEL,
    borderStyle: 'solid',
    borderRadius: ScaleS(10)
  },
  borderUp: {
    position: 'absolute',
    top: -12,
    left: 20,
    // backgroundColor: 'red',
    borderStyle: 'solid',
    borderLeftColor: 'transparent',
    borderLeftWidth: 12,
    borderRightColor: 'transparent',
    borderRightWidth: 12,
    borderBottomColor: '#979797',
    borderBottomWidth: 12
  },
  borderUpEmpty: {
    position: 'absolute',
    left: 20 + ONE_PIXEL,
    top: -12 + ONE_PIXEL,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftColor: 'transparent',
    borderLeftWidth: 12 - ONE_PIXEL,
    borderRightColor: 'transparent',
    borderRightWidth: 12 - ONE_PIXEL,
    borderBottomColor: '#fff',
    borderBottomWidth: 12
  },
  tipTxt: {
    fontSize: ScaleT(14),
    fontWeight: '400',
    lineHeight: ScaleS(25),
    color: '#444444'
  }
})
